<template>
  <div id="app">
    <el-form :model="record" label-width="100px" :rules="formRules" ref="abc">
      <el-form-item label="奖惩记录" prop="name">
        <el-input v-model="record.name">
        </el-input></el-form-item>

      <el-form-item label="学生">
        <el-select v-model="record.stuId" placeholder="请选择学生">
          <el-option v-for="(item,index) in stuList" :key="index" :label="item.name":value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="奖惩描述" prop="des">
        <el-input v-model="record.des" type="textarea" rows="5"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.prevent="test">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "addRecord",
  data(){
    return {
      stuList:[],
      record:{
        name:"",
        stuId:"",
        des:""
      },
      //定义表单的验证规则
      formRules:{//表单验证规则
        name:[
          //required: true表示该框是必填的。message表示用户出错后提示信息，trigger移出光标提示错误信息
          {required:true,message:"奖惩名称不能为空",trigger:"blur"}
        ]
      }
    }
  },
  methods:{
    test(){
      this.$refs["abc"].validate((valid)=>{
        //valid表示表单是否验证通过
        if(valid){

          //发出保存信息
          this.$confirm("是否确认提交","保存提示").then(()=>{
            this.axios.put("/record",this.record).then((resp)=>{
              this.$message.success("修改成功!");
              this.$router.push("/manager/record")
            });
          }).catch(()=>{})
        }
      })
    }
  },
  created(){
    //获取所有学生信息
    this.axios.get("/student/selectOne").then((resp)=>{
      this.stuList=resp.data
      console.log(this.stuList=resp.data);
    });
    this.axios.get("/record/selectOne/"+this.$route.query.id).then((resp)=>{
      this.record=resp.data
      console.log(this.record=resp.data);
    });
  }
}
</script>

<style scoped>

</style>
